import { Card } from '@arco-design/web-react';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';
import { nodeBarDataAtom } from '../model';

const NodeBar = () => {
  const nodeBarData = useAtomValue(nodeBarDataAtom);

  return (
    <Card title="节点容器数目">
      <div className="h-400px">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            width={500}
            height={300}
            data={nodeBarData}
            margin={{
              top: 5,
              right: 30,
              left: 20,
              bottom: 5,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />

            <Bar dataKey="count" barSize={35} fill="#2FA3FF" />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
};

export default NodeBar;
